$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
$code-font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
$modal-border-color: #afb2b7;
$light-contrast-background: #fafbfc;
$normal-font-color: rgb(36, 41, 69);
$divider-color: #e1e4e8;
$emphasis-color: #666;

.sg-tooltip {
    background-color: $light-contrast-background;
    max-width: 450px;
    min-width: 275px;
    border: solid 1px $modal-border-color;
    font-family: $font-family;
    color: $normal-font-color;
    font-size: 12px;
    z-index: 30;
    position: absolute;
    overflow: auto;
    border-radius: 3px;
    box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);

    .tooltip__title {
        font-family: $code-font-family;
    }

    &__title-container {
        border-bottom: 1px solid $divider-color;
        padding: 12px;
        display: flex;
        align-items: flex-start;
    }

    &__title {
        font-family: $code-font-family;
        word-wrap: break-word;
        margin: 0 0.5rem;
        padding: 0 !important;
        flex: 1;
    }

    &__doc {
        padding: 16px;
        max-height: 150px;
        overflow: auto;
        margin-bottom: 0;
        font-family: $font-family;
        border-bottom: 1px solid $divider-color;

        p:not(:first-child) {
            margin-top: 0.5rem;
        }

        p:last-child {
            margin-bottom: 0;
        }
    }

    &__actions {
        display: flex;
        text-align: center;
        padding: 12px;
    }

    &__action {
        flex: 1;
        cursor: pointer;
    }

    &__more-actions {
        font-style: italic;
        color: #005cc5;
        padding: 12px;
    }

    &__close-icon {
        cursor: pointer;
        color: #586069;
        &:hover {
            color: #24292e;
        }
    }

    &__definition-icon {
        margin-right: 0.5rem;
    }

    &__references-icon {
        margin-right: 0.5rem;
    }

    &__loading {
        padding: 12px;
    }
}
